<template>
  <el-container>

    <el-header style="height: 100px;padding: 0;line-height: 100px">
      <img src="../assets/logo2.jpg" style="float: left">
      <el-row type="flex" justify="end">
        <el-col :span="18" style="font-size: 25px;font-weight: 600">尚马金融MIS管理系统</el-col>
        <el-col :span="6">
          <el-button-group>
            <el-button type="primary">{{ loginUserName }}</el-button>
            <el-button type="primary" icon="el-icon-s-data"></el-button>
            <el-button type="primary" icon="el-icon-setting"></el-button>
            <el-button type="primary" icon="el-icon-switch-button" @click="logout()"></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-header>

    <el-container style="overflow-y: hidden">
      <el-aside width="299px">
        <!-- NavMenu 导航菜单->侧栏 -->
        <el-row class="tac">
          <!-- 24分栏 -->
          <el-col :span="24">
            <el-menu router default-active="2" class="el-menu-vertical-demo">
              <!-- menuData：所有的一级菜单数据 -->
              <el-submenu :key="menu.menuId" :index="menu.menuId.toString()" v-for="menu in menuListData">
                <template slot="title">
                  <!-- icon：图标 -->
                  <i :class="menu.glyphicon"></i>
                  <span>{{ menu.menuName }}</span>
                </template>
                <el-menu-item-group>
                  <!-- 呈现二级菜单数据 -->
                  <el-menu-item :key="subMenu.menuId" :index="subMenu.menuUrl" v-for="subMenu in menu.subMenu">
                    {{ subMenu.menuName }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

  </el-container>
</template>
<script>

export default {
  data() {
    return {
      menuListData: [],
      loginUserName: 'root',
    };
  },
  methods: {
    queryLoginUserData(){
      this.$axios.post("/main", "").then(resp => {
        if (resp.data.returnCode === 2001) {
          //呈现侧栏数据
          this.menuListData = resp.data.returnData.menuList;
          //呈现登录用户名称
          this.loginUserName = resp.data.returnData.loginUserName;
        }
      }).catch(error => {
        console.log(error);
      })
    },
    logout(){
      this.$axios
          .post("/logout", "")
          .then((resp) => {
            if (resp.data.returnCode == 4007) {
              //退出到登录
              this.$router.push("/");
            }
          })
          .catch((error) => {
            console.log(error);
          });
    }
  },
  mounted() {
    this.queryLoginUserData();
  },
};
</script>
<style>
/* 自增样式 */
/* 去除外边距 */
* {
  margin: 0;
  /* padding: 0; */
}

/* 设置页面高度 */
html,
body,
.el-container {
  height: 100%;
}

/* Container 布局容器 */
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>